<template>
	<view class="">
		<!-- <view class="" style="width: 100vw;height: 4vh;"></view> -->
	
	<view class="" style="display: flex;">
		<view class="" >
			<!-- <leftmenuVue ></leftmenuVue> -->
		</view>
	<!-- 列表盒子开始 -->
	<!-- hldsrc是动态的背景图片，包含的css类名有：bg -->
	<view class="zw" style="display: flex; flex-wrap:wrap;">
		
		<!-- <view class="" v-for="item in 3" :key="item"> -->
			<view class="bg" style="" @click="knowledge()" :style="{
			backgroundImage: `url(${pic1})`,   
			backgroundSize: 'cover'
							}">
					<view  style="width: 65%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.3);">
							<view class="" style="height: 6%;">
								
							</view>
							<view class="" style="margin-left: 10%; font-size: 50rpx; color: aliceblue;">
								就业知识
							</view>
							<view class="" style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">
								
							</view>
							<view class="xxms" style="margin-top: 10%;   margin-left: 5%; font-size: 40rpx; color: aliceblue;height: 60%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 50rpx; ">
								了解劳动法、签订劳动合同、明确薪资福利、掌握五险一金、熟悉试用期规定、维护合法权益等
							</view>
					</view>
			</view>
			<view class="bg" style="" @click="strategy()" :style="{
			backgroundImage: `url(${pic2})`,   
			backgroundSize: 'cover'
							}">
					<view  style="width: 65%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.3);">
							<view class="" style="height: 6%;">
								
							</view>
							<view class="" style="margin-left: 10%; font-size: 50rpx; color: aliceblue;">
								就业政策
							</view>
							<view class="" style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">
								
							</view>
							<view class="xxms" style="margin-top: 10%;   margin-left: 5%; font-size: 40rpx; color: aliceblue;height: 60%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 50rpx; ">
								促进就业创业、提供职业技能培训、扶持重点群体（如高校毕业生、农民工等）、鼓励灵活就业、落实社保补贴等
							</view>
					</view>
			</view>
			<view class="bg" @click="aiclick" style="margin-left: auto; margin-right: auto; width: 60vw;" :style="{
			backgroundImage: `url(${pic3})`,   
			backgroundSize: 'cover'
							}">
					<view  style="width: 65%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.3);">
							<view class="" style="height: 6%;">
								
							</view>
							<view class="" style="margin-left: 10%; font-size: 50rpx; color: aliceblue;">
								问AI
							</view>
							<view class="" style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">
								
							</view>
							<view class="xxms" style="margin-top: 10%;   margin-left: 5%; font-size: 40rpx; color: aliceblue;height: 60%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 50rpx; ">
								基于大数据分析劳动力市场趋势，智能匹配岗位需求与求职者技能，提供个性化职业规划建议
							</view>
					</view>
			</view>
		<!-- </view> -->
		
	</view>
	<!-- 列表盒子结束 -->
	</view>
	</view>
</template>

<script>
	import leftmenuVue from '../../common/leftmenu.vue'
	export default {
		components: {
		   leftmenuVue
		 },
		data() {
			return {
				pic1:this.$baseURL+"/profile/upload/2025/05/28/bj1_20250528211943A015.png",
				pic2:this.$baseURL+"/profile/upload/2025/05/28/bj2_20250528211953A016.png",
				pic3:this.$baseURL+"/profile/upload/2025/05/28/bj3_20250528212001A017.png",
				title: '就业基础知识'
			};
		},
		methods: {
			knowledge() {
				 this.$emit('changePageKnowledgeModel', 'KnowledgeModel');
				uni.setStorageSync('informationType', 0);
				console.log("点击就业知识")
				
			},
			strategy() {
				this.$emit('changePageKnowledgeModel', 'KnowledgeModel');
				uni.setStorageSync('informationType', 1);
				
			},
			aiclick() {
				this.$emit('changePageKnowledgeModel', 'mianshi');
				console.log("点击问ai")
				// uni.navigateTo({
				// 	url: '/pages/knowailedgeModel/ai/ai'
				// });
			},
		}
	};
</script>

<style>
	.bg{
		border-radius: 50px;
		box-shadow:  -20px -20px 60px #bebebe,
		             20px 20px 60px #ffffff;
		width: 33vw;height: 36vh;
		margin-top: 3vh;
		margin-bottom: 3vh ;
		margin-left: 5vw;
		margin-right: 5vw;
		  background-size: contain;  
		  background-repeat: no-repeat;
		  background-position: center center; 
		
	}
	
	* {
		margin: 0;
		padding: 0;
	}
	
	.box {
		height: 50px;
		width: 100%;
		background-color: #02a7f0;
		display: flex;
		align-items: center;
		padding-left: 15px;
	}
	
	.text-area {
		width: 100%;
		height: 100%;
	}
	/deep/ .u-cell__title-text.data-v-913eaa32 {
		font-size: 35rpx !important;
	}
</style>